<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="vue_flow_show" content="">
    <title>流程执行</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 3px;
            cursor: pointer;
            color: #606266;
        }

        .hovered {
            background-color: #e0e0e0;
            /* 鼠标悬停时的背景颜色 */
        }

        .clicked {
            background-color: #b0e0e6;
            /* 点击时的背景颜色 */
        }

        .footer-bar {
            height: 45px;
            width: 100%;
            position: fixed;
            /* 修改为 fixed 定位 */
            top: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            color: #666;
            display: flex;
            justify-content: space-between;
            padding: 0 10px 0 10px;
        }

        .title_div {
            display: flex;
            align-items: center;
        }

        .title_img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .ellipsis-text {
            width: fit-content;
            max-width: 24ch;
            /* 最多显示 7 个字符宽度 */
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
        }

        .text-color-red {
            color: red;
        }

        .text-color-green {
            color: green;
        }

        .button-icon {
            margin-right: 5px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <div class="footer-bar">
            <div class="title_div">
                <img class="title_img" src="menu.svg" alt=""></img>
                <h2>流程执行</h2>
            </div>
            <div>
                <button onclick="handleButton()">111111</button>
            </div>
        </div>
        <div style="margin-top: 45px;">
            <div>
                <ul id="flowListUl"></ul>
            </div>
        </div>
    </div>
    <script>
        const flowList = [
            { name: '正在执行:获取当前数据-1', status: '0' },
            { name: '正在执行:创建视图-1', status: '1' },
        ];

        createList(flowList);

        function createList(flowList) {
            const flowListUl = document.getElementById('flowListUl');
            // 清空原有列表项
            flowListUl.innerHTML = '';

            flowList.forEach((item, index) => {
                const li = document.createElement('li');
                li.style.marginBottom = '5px';
                li.style.borderRadius = '3px';
                li.style.display = 'flex';
                li.style.justifyContent = 'space-between';
                li.style.alignItems = 'center';
                li.style.fontSize = '16px';

                const ellipsisText = document.createElement('div');
                ellipsisText.classList.add('ellipsis-text');
                ellipsisText.title = item.name;
                ellipsisText.textContent = item.name;

                const statusText = document.createElement('div');
                statusText.classList.add('ellipsis-text');

                statusText.title = item.status;
                if (item.status == '0') {
                    statusText.textContent = '✓';
                    statusText.classList.add('text-color-green');
                } else {
                    statusText.textContent = 'X';
                    statusText.classList.add('text-color-red');
                }

                li.appendChild(ellipsisText);
                li.appendChild(statusText);
                flowListUl.appendChild(li);

                li.addEventListener('mouseover', () => {
                    li.classList.add('hovered');
                });
                li.addEventListener('mouseout', () => {
                    li.classList.remove('hovered');
                });
                li.addEventListener('click', () => {
                    const listItems = document.querySelectorAll('li');
                    listItems.forEach(li => li.classList.remove('clicked'));
                    li.classList.add('clicked');
                });
            });
        }

        function updateList(obj, index) {
            if (index < 0) {
                return;
            }

            if (index < flowList.length) {
                flowList[index] = obj;
            } else {
                flowList.push(obj);
            }

            createList(flowList);
        }

        function handleButton() {
            updateList({ name: '正在执行:创建图纸-1', status: '1' }, 2);
        }
    </script>
</body>

</html>